<template>
	<div style="width: 100%">
		<div :style="FieldItem?.attrs.style.boxStyle">
			<el-row :style="FieldItem?.attrs.style.titleStyle">
				<el-col>{{ FieldItem?.attrs.title }}</el-col>
			</el-row>
			<el-row v-for="(item, index) in FieldItem?.attrs.contentArr" :key="index" style="width: 100%">
				<template v-for="(val, i) in item" :key="i">
					<el-col :span="12 / item.length" :style="FieldItem?.attrs.style.labelStyle" class="attrTitle">
						<el-icon><component :is="iconMap[val.icon]" /></el-icon>
						<span>{{ val.label }}</span>
					</el-col>
					<el-col :span="12 / item.length" :style="FieldItem?.attrs.style.valueStyle">{{ val.value }}</el-col>
				</template>
			</el-row>
		</div>
	</div>
</template>

<script setup lang="ts">
import { TablePageType, TabFieldType } from '/@/components/Linxyun/custom/DataStructs/commontype';
import { calcFieldValue } from '/@/components/Linxyun/custom/CustomCommon/lxy_expression.js';
import iconMap from '/@/utils/iconMap';

const props = withDefaults(
	defineProps<{
		pageInfo?: TablePageType;
		pageData?: Record<string, any>;
		inputData: Record<string, any>;
		globalData?: Record<string, any>;
		FieldItem: TabFieldType | null;
	}>(),
	{
		FieldItem: null,
	}
);
const { FieldItem } = toRefs(props);

onMounted(() => {
	init();
});

const init = () => {
	FieldItem.value?.attrs.contentArr.forEach((item: any[]) => {
		item.forEach((val) => {
			if (/'\$.*\}'$/g.test(val.value) || /^'label\..*'$/g.test(val.value)) {
				val.value = calcFieldValue(4, val.value, props.inputData, props.pageData, props.globalData);
			}
		});
	});
};
defineExpose({ init });
</script>

<style lang="scss" scoped>
.attrTitle .el-icon {
	vertical-align: middle;
}
.attrTitle span {
	vertical-align: middle;
	margin-left: 2px;
}
</style>
